<template>
  <div>
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="name" label="文件名称" width="120">
      </el-table-column>
      <el-table-column prop="address" label="下载地址" show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="batchDownload()">批量下载</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        name: '文件1',
        address: 'https://www.baidu.com/index1.html'
      }, {
        name: '文件2',
        address: 'https://www.baidu.com/index2.html'
      }, {
        name: '文件3',
        address: 'https://www.baidu.com/index3.html'
      }, {
        name: '文件4',
        address: 'https://www.baidu.com/index4.html'
      }, {
        name: '文件5',
        address: 'https://www.baidu.com/index5.html'
      }, {
        name: '文件6',
        address: 'https://www.baidu.com/index6.html'
      }, {
        name: '文件7',
        address: 'https://www.baidu.com/index7.html'
      }],
      multipleSelection: []
    }
  },

  methods: {
    batchDownload() {
      if (this.multipleSelection == null || this.multipleSelection.length == 0) {
        this.$message('请勾选要下载的文件');
        return;
      }
      var tasks = []
      for (let i = 0; i < this.multipleSelection.length; i++) {
        const e = this.multipleSelection[i];
        tasks.push({
          name: e.name, // 指定下载文件名（含扩展名）。【若不填此项，将根据下载 URL 自动获取文件名】
          url: e.address // 指定下载地址【必填项】
        })
      }
      thunderLink.newTask({
        taskGroupName: "批量下载" + Date.now(),// 指定任务组名称，可将批量任务合并成类似BT任务的【任务组】，迅雷将在下载目录中创建同名子文件夹保存所有下载文件。【推荐填写。若不填此项，迅雷下载列表会显示所有本次创建的下载任务，可能会使用户的下载列表显得杂乱】
        downloadDir: '', // 指定当前任务的下载目录名称，迅雷会在用户剩余空间最大的磁盘根目录中创建这个目录。【若不填此项，会下载到用户默认下载目录】
        tasks: tasks
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
